<template>
  <div class="main clearfix">
    <div class="sign f_l" v-for="(item,index) in signList" :key="item.sign_id" style="width: 50%;margin-bottom: 20px">
      <Row >
        <i-col span="11">
          <Card >
            <p slot="title">{{item.title}}</p>
            <p>签到描述：{{item.desc}}</p>
            <p>签到开始时间：{{item.start_time | toDateString }}</p>
            <p>签到结束时间：{{item.end_time | toDateString }}</p>
            <p>签到备注：{{item.remake}}</p>
            <p style="margin-top: 20px;display: flex;width: 100%;justify-content: space-around">
              <i-button type="info" shape="circle" @click="sign(index)" >签到</i-button>
            </p>
          </Card>
        </i-col>
      </Row>
    </div>
    <Modal v-model="isSign" width="600"
           title="签到"
           @on-ok="ok"
    >
      <div>
        <span>签到名称：{{currentSign.title}}</span>
      </div>
      <div style="margin-top: 20px">
        <span>签到描述：{{currentSign.desc}}</span>
      </div>
      <div style="margin-top: 20px">
        <span>签到协议：{{currentSign.protocol}}</span>
        <div style="margin-top: 8px">
          <!--<Radio v-model="currentSign.isProtocol">同意以上签到协议</Radio>-->
          <!--<Checkbox :model.sync="currentSign.isProtocol" >同意以上签到协议</Checkbox>-->
          <input type="checkbox" id="checkbox" v-model="currentSign.isProtocol"><label for="checkbox">同意以上签到协议</label>
        </div>
      </div>
    </Modal>
    <baidu-map  class="map" @ready="map_handler">
    </baidu-map>
    </div>
</template>

<script>
import api from '../../api/index.js';
import {mapState} from 'vuex'
  export default {
    name:'',
    data () {
      return {
        LON:0.01141,//1公里等于多少经度
        LAT:0.00899,//1公里等于多少纬度
        currentLat:null,//当前位置的经度
        currentLon:null,//当前位置的纬度
        BMap:{},
        map:{},
        isSign:false,
        currentSign:{
          title:null,
          desc:null,
          start_time:null,
          end_time:null,
          creater:null,
          longitude:null,
          latitude:null,
          class_id:null,
          protocol:null,
          remake:null,
          addRessrange:null,
          isProtocol:false
        }
      };
    },
    computed:{
      ...mapState([
        'user',
        "signList",
      ])
    },
  mounted() {
    if(this.user.user_id){
      this.$store.dispatch({
        type: 'getSignList',
        classId: this.user.fk_classId
      });
    }
    },
    filters:{
      toDateString: (date)=>{
        let d  = new Date(date);
        let y  = d.getFullYear();
        let m = d.getMonth()+1;
        let day = d.getDate();
        let h = d.getUTCHours();
        let min = d.getUTCMinutes();
        return `${y}年-${m}月-${day}日-${h}时-${min}分`;
      }
    },
    methods: {
      sign(index){
        this.isSign=true;
        this.currentSign = this.signList[index];
      },
      //确认签到
      ok(){
        console.log(this.currentSign.isProtocol);
        if(this.currentSign.isProtocol){
          //同意签到协议
          let lon = parseFloat(this.currentSign.longitude) +this.currentSign.addRessrange*this.LON; //最大经度
          let lat = parseFloat(this.currentSign.latitude)+this.currentSign.addRessrange*this.LAT;  // 最大纬度
          if(this.currentLon>lon||this.currentLat>lat){
            //超出范围
            this.$Message.warning('您已经超出能够签到的范围');
            return
          }else {
            //签到
            let data = {
              sign_id:this.currentSign.sign_id,
              class_id:this.currentSign.class_id,
              class_name:null,
              user_id:this.user.user_number,
              user_name:this.user.name,
              sign_latitude:this.currentLat,
              sign_longitude:this.currentLon
            };
           api.sign(data).then(resolve=>{
             console.log(resolve);
             if(resolve.status==1){
               this.$Message.success('签到成功');
             }else if(resolve.status==0) {
               this.$Message.error('签到失败');
             }
           })
          }
        }else {
          this.$Message.warning('请您同意签到协议才能进行签到');
          return;
        }
      },
      //初始化地图
      map_handler({ BMap, map }) {
        //获取当前位置的经纬度
        this.BMap = BMap;
        this.map = map;
        if (!this.BMap) return false;
        let geolocation = new BMap.Geolocation();
        let _this = this;
        geolocation.getCurrentPosition(function(r) {
          _this.currentLon = r.point.lng; //纬度
          _this.currentLat = r.point.lat; //经度
        })
      },
      test(e){
        console.log(e);
      }
    }
  }
</script>
<style lang='' scoped>
   .add{
        margin-bottom: 20px;
    }
   .f_r{
     float: right;
   }
   .f_l{
     float: left;
   }
   .clearfix:after{
     content: '';
     height: 0;
     line-height: 0;
     display: block;
     visibility: hidden;
     clear: both;
   }
   .clearfix{
     zoom: 1;/*兼容IE游览器*/
   }
</style>
